Revision:
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
The elad2412 new CSS reset is using the new CSS features:
the global CSS reset keywords, i.e. the "unset" and "revert" keywords.
the new property of "all" which can reset all properties combined.
the ":where()" pseudo-class to remove specificity.
the ":not()" pseudo-class with multi arguments.
This elad2412 CSS reset is built from the understanding that we don't want to use the default style we are getting from the browsers, except the "display" property. The reset removes all the default styles which we are getting on specific HTML elements except the "display" property and except special HTML elements like iframe, canvas, img, svg, video.
The CSS reset code by Eric A. Meyer was released in 2011. It is meant to give your CSS styling a common starting ground, preventing each browser from applying their own styling to your carefully designed page.
In case you want the default style of the browser of a specific HTML element back, you can revert back to the default styles of the browser.
/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {all: unset; display: revert;}
/* Preferred box-sizing value */
*, *::before, *::after { box-sizing: border-box;}
/* Remove list styles (bullets/numbers) in case you use it combine with normalize.css */
ol, ul {list-style: none;}
/* For images to not be able to exceed their container */
img {max-width: 100%;}
/* removes spacing between cells in tables */
table {border-collapse: collapse;}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {white-space: revert; }
All evergreen browsers support this CSS reset: Chrome, Edge: version 88+, FireFox: version 84+, Safari/iOS browsers: version 14+, Opera: version 75+, Samsung Browser: version 15+
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126, License: none (public domain)*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse;border-spacing: 0;}
initial: reverts the CSS value back to the “browser default”.
Red
Green - click to reset
Codes:
<div style="margin-left:4vw;" id="demoA-parent">
<p class="spec">Red</p>
<p class="spec" id="demoA-child" onclick="this.style.color='initial'">Green - click to reset</p>
</div>
<style>
#demoA-parent { color: red; }
#demoA-child { color: green; }
</style>
inherit: restores the CSS value to follow the parent.
Red
Green - click to reset
Codes:
<div style="margin-left:4vw;" id="demoB-parent">
<p class="spec">Red</p>
<p class="spec" id="demoB-child" onclick="this.style.color='inherit'">Green - click to reset</p>
</div>
<style>
#demoB-parent { color: red; }
#demoB-child { color: green; }
</style>
unset: attempt to revert to the inherited value first. If none is defined, it will revert to the initial value.
Parent Red - click to reset
Parent None - click to reset
Codes:
<div>
<div style="margin-left:4vw;" id="demoC-parent">
<p class="spec" id="demoC-child" onclick="this.style.color='unset'">Parent Red - click to reset</p>
</div>
<div style="margin-left:4vw;"id="demoD-parent">
<p class="spec"id="demoD-child" onclick="this.style.color='unset'">Parent None - click to reset</p>
</div>
</div>
<style>
#demoC-parent { color: red; }
#demoC-child, #demoD-child { color: green; }
</style>
revert: restore back to the user style sheet first. If none is defined, it will go back to the initial.
Codes:
<div style="margin-left:4vw;" id="demoE" onclick="this.style.color='revert'">click to revert</div>
<style>
#demoE { color: red; }
</style>